<template>
  <div>
    <div class="top" style="height: 120px;">
      <!-- 设备总数：绑定count[0]（对应后端type:"设备总数"的value） -->
      <div class="top1">
        设备总数：{{ count[0] !== undefined ? count[0] : 0 }}
      </div>
      <!-- 在线设备数：绑定count[1]（对应后端type:"在线设备数"的value） -->
      <div class="top2">
        在线设备数：{{ count[1] !== undefined ? count[1] : 0 }}
      </div>
      <!-- 离线设备数：绑定count[2]（对应后端type:"离线设备数"的value） -->
      <div class="top3">
        离线设备数：{{ count[2] !== undefined ? count[2] : 0 }}
      </div>
      <!-- 工程总数：绑定count[3]（对应后端type:"工程总数"的value） -->
      <div class="top4">
        工程总数：{{ count[3] !== undefined ? count[3] : 0 }}
      </div>
      <!-- 工单总数：绑定count[4]（对应后端type:"工单总数"的value） -->
      <div class="top5">
        工单总数：{{ count[4] !== undefined ? count[4] : 0 }}
      </div>
    </div>
    <div class="bottom" style="height: 400px;">
      <div class="left">
        <Map></Map>
      </div>
      <div class="right">
        <div class="up" style="height: 200px;">
          <div class="up1">
            <C221></C221>
          </div>
          <div class="up2">
            <C222></C222>
          </div>
        </div>
        <div class="down" style="height: 200px;">
          <C223></C223>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from '@/utils/request'
import Map from './components/Map.vue'
import C221 from './components/C221.vue'
import C222 from './components/C222.vue'
import C223 from './components/C223.vue'
export default {
  data() {
    return {
      count: [],
    };
  },
  components: {
    Map,
    C221,
    C222,
    C223
  },
  computed: {},
  methods: {
    async getCountData() {
      let res = await get('/count/countAll');
      console.log(res, "052304");
      let temp = res.data.map(item => {
        return item.value
      });
      this.count = temp;
    }
  },
  created() {
    this.getCountData();
  },
  // async 
  mounted() {
    // await this.getCountData();
  },
};
</script>
<style long="scss" scoped>
.top {
  /* height: calc(100vh - 60px); */
  /* 给父元素开启伸缩盒 */
  display: flex;
  margin-top: 28px;
  margin-bottom: 28px;

  /* padding: 7px; */
  .top1,
  .top2,
  .top3,
  .top4,
  .top5 {
    flex: 1;
    display: flex;
    margin: 0px 7px 0px 0px;
    padding: 14px;
    /* margin-left: 10px; */
  }

  &>div {
    flex: 1;
  }
}

.bottom {
  /* height: calc(100vh - 60px); */
  /* 给父元素开启伸缩盒 */
  display: flex;
  margin-top: 28px;

  /* flex-direction: column; */
  .left {
    flex: 1;
    display: flex;
  }

  .right {
    flex: 2;
    display: flex;
    flex-direction: column;

    .up {
      flex: 2;
      display: flex;
      padding: 10px;
      height: 180px;
      width: 423px;

      .up1,
      .up2 {
        flex: 1;
        display: flex;
        /* flex-direction: column; */

        /* & 表示直接父元素 */
        /* &>div {
          flex: 1;
        } */
      }
    }

    .down {
      flex: 1;
      display: flex;

      /* & 表示直接父元素 */
      &>div {
        flex: 1;
      }
    }
  }
}

.top>.top1 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background-color: #fdc660;
}

.top>.top2 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background-color: #fda065;
}

.top>.top3 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background-color: #f86b66;
}

.top>.top4 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background-color: #e6003b;
}

.top>.top5 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background-color: #8774f2;
}
</style>